/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="channel-lock-overview">
    <div class="channel-lock tuxing-left" ref="tuxingLeft">
      <div class="channel-lock-map">
        <channel-realtime-intersection
          :agentId="this.AgentId"
          :roadDirection="roadDirection"
          :channelRealtimeStatusData="realTimeChannelData"
        />
      </div>
      <div class="channel-lock-realtime">
        <RealTimeChannelPanel
          v-if="!isThirdSignal"
          :roadDirection="roadDirection"
          :channelRealtimeStatusData="realTimeChannelData" />
      </div>
    </div>
    <div class="channel-lock-control tuxing-right" ref="tuxingRight">
      <TerminalLock :curDevice="curDevice" :isShowClose="false"></TerminalLock>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getMessageByCode } from '../../../utils/responseMessage.js'
import TerminalLock from './TerminalLock'
import { getRealTimeChannel } from '@/api/system'
import RealTimeChannelPanel from './RealtimeChannel/index'

export default {
  name: 'channel-lock-overview',
  computed: {
    ...mapState({
      curOpenatcAgentid: state => state.globalParam.curOpenatcAgentid,
      curHomePage: state => state.globalParam.curHomePage,
      roadDirection: state => state.globalParam.roadDirection
    })
  },
  components: {
    TerminalLock,
    RealTimeChannelPanel
  },
  props: {
    AgentId: {
      type: String,
      default: '0'
    },
    agentName: {
      type: String
    },
    isThirdSignal: {
      type: Boolean,
      default: false
    },
    crossStatusData: {
      type: Object
    }
  },
  watch: {
    curHomePage: {
      handler: function (newval, oldval) {
        if (oldval !== 'ChannelLock' && newval === 'ChannelLock') {
          this.initData()
        }
      }
    },
    crossStatusData: {
      handler: function (val, oldVal) {
        // 第三方信号机显示路口状态数据是相位状态
        if (this.isThirdSignal) {
          this.realTimeChannelData = JSON.parse(JSON.stringify(this.crossStatusData))
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  data () {
    return {
      realTimeChannelData: {},
      commonHeight: undefined, // 左右侧面板的高度值
      curDevice: {
        name: this.agentName,
        agentid: this.AgentId,
        data: {
          data: {
            greenflash: 6,
            duration: 600,
            yellow: 3,
            redclear: 2,
            mingreen: 15,
            direction: [],
            peddirection: []
          }
        }
      }
    }
  },
  methods: {
    initData () {
      if (this.realTimeChannelTimer) {
        this.clearChannelInterval()
      }
      if (!this.isThirdSignal) {
        this.realTimeChannelTimer = setInterval(() => {
          this.getRealTimeChannel()
        }, 1000)
        this.getRealTimeChannel()
      } else {
        this.realTimeChannelData = JSON.parse(JSON.stringify(this.crossStatusData))
      }
    },
    clearChannelInterval () {
      if (this.realTimeChannelTimer !== null) {
        clearInterval(this.realTimeChannelTimer) // 清除定时器
        this.realTimeChannelTimer = null
      }
    },
    getRealTimeChannel () {
      getRealTimeChannel().then(data => {
        let res = data.data
        if (!res.success) {
          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
          return
        }
        this.realTimeChannelData = res.data.data
      }).catch(error => {
        this.$message.error(error)
        console.log(error)
      })
    }
  },
  created () {
  },
  async mounted () {
    this.initData()
  },
  destroyed () {
    this.clearChannelInterval()
  },
  updated () {
    if (this.$refs.tuxingLeft.offsetHeight !== this.commonHeight) {
      // 根据左侧面板动态变化的高度，同步更新右侧面板高度
      this.commonHeight = this.$refs.tuxingLeft.offsetHeight
      this.$refs.tuxingRight.style.height = this.commonHeight + 'px'
    }
  }
}
</script>

<style lang="css" rel="stylesheet/scss" scoped>
</style>
